<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国天气查询</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>

    <div id="app" v-cloak>
        <header class="w">
            <div class="fl">
                <h2>全国天气预报查询</h2>

            </div>
            <div class="i_inp">
                <i class="i1">省份:</i>
                <input type="text" placeholder="例如：安徽省" class="fl_inp1" v-model="provinces">
                <i class="i1">城市:</i>
                <input type="text" placeholder="例如：合肥市" class="fl_inp2" v-model="city">
                <label for="">
                    <input type="button" value="查询" class="btn btn-default" @click="serachcity">
                </label>
            </div>
            <div class="fr">
                <ul>
                    <li>
                        <a href="http://u2.weather.com.cn/web/sso/login-ui.do?returnUrl=http://www.weather.com.cn/">登录</a>
                    </li>
                    <li><a href="http://u2.weather.com.cn/web/sso/regist-ui.do?returnUrl=http://www.weather.com.cn/">注册</a>
                    </li>
                </ul>
            </div>

        </header>
        <div class="panel panel-primary w bottom">
            <div class="panel-heading">
                <h3 class="panel-title h3_1">检索天气信息</h3>
                <a href="javascript:;" class="h3_a1" @click="serach_a">刷新</a>
            </div>
            <div class="panel-body form-inline pre">
                <i class="label_7">检索未来七天：</i>
                <label for="" class="label2">
                    温度:<input type="text" class="form-control" v-model="tem1" placeholder="按温度检索">
                </label>
                <label for="">
                    <input type="button" value="搜索" class="btn btn-default" @click="serach1">
                </label>
                <label for="">
                    天气:<input type="text" class="form-control" v-model="cast1" placeholder="按天气检索，例：晴">
                </label>
                <label for="">
                    <input type="button" value="搜索" class="btn btn-default" @click="serach2">
                </label>
                <i class="label_8">检索今日气温：</i>
                <label for="" class="label3">
                    温度:<input type="text" class="form-control" v-model="tem2">
                </label>
                <label for="">
                    <input type="button" value="搜索" class="btn btn-default" @click="serach3">
                </label>
                <label for="">
                    天气:<input type="text" class="form-control" v-model="cast2">
                </label>
                <label for="">
                    <input type="button" value="搜索" class="btn btn-default" @click="serach4">
                </label>
            </div>
        </div>



        <div class="body w">
            <div class="tap">
                <div class="forcat_7">
                    <h4>未来七天</h4>
                </div>
                <table class="table table-condensed  table-hover table-bordered table-striped ">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>温度(最高温)</th>
                            <th>天气</th>
                            <th>风向</th>
                            <th>风力</th>
                        </tr>
                    </thead>
                    <tbody>
                        <transition>


                            <tr v-for="item in ret">
                                <td v-cloak>{{item.time}}</td>
                                <td v-cloak>{{item.max_degree}}</td>
                                <td v-cloak>{{item.day_weather_short}}</td>
                                <td v-cloak>{{item.day_wind_direction}}</td>
                                <td v-cloak>{{item.day_wind_direction_code}}</td>
                            </tr>
                        </transition>
                    </tbody>
                </table>
            </div>
            <div class="bd">
                <div class="forcat_7">
                    <h4>今日气温</h4>
                </div>

                <table class="table table-condensed  table-hover table-bordered table-striped ">
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>温度(最高温)</th>
                            <th>天气</th>
                            <th>风向</th>
                            <th>风力</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in day">
                            <td class="td1" v-cloak>{{dateFormat(item.update_time)}}</td>
                            <td v-cloak>{{item.degree}}</td>
                            <td v-cloak>{{item.weather}}</td>
                            <td v-cloak>{{item.wind_direction}}</td>
                            <td v-cloak>{{item.wind_power}}</td>

                        </tr>
                    </tbody>
                </table>
            </div>
        </div>


    </div>

</body>

</html>